<template>
	<view class='evaluate'>
		<view class='tagScreen dFlex jAround_aCenter'>
			<view :class="['tagOne',zh_score == '1' ? 'actTag' : '']" @click='zh_score = "1";getShopComment();'>非常满意</view>
			<view :class="['tagOne',zh_score == '2' ? 'actTag' : '']" @click='zh_score = "2";getShopComment();'>满意</view>
			<view :class="['tagOne',zh_score == '3' ? 'actTag' : '']" @click='zh_score = "3";getShopComment();'>一般</view>
			<view :class="['tagOne',zh_score == '4' ? 'actTag' : '']" @click='zh_score = "4";getShopComment();'>差评</view>
		</view>
		<view class="statistics">
			<view class="tongji dFlex jBetween_aCenter">
				<text>共{{total?total:'0'}}条评论</text>
				<text class='favorable'>好评率{{rate}}%</text>
			</view>
			<view class='list' v-if='comment.length'>
				<view class='commentOne dFlex jStart_aStart ' v-for="(item,index) in comment" :key='index'>
					<u-avatar :src="item.avatar"></u-avatar>
					<view class='commentContent'>
						<view class="nickname">{{item.user_name}}</view>
						<view class='desc'>{{item.content}}</view>
						<view class='imgs dFlex jStart_aCenter' v-if='item.image_arr.length'>
							<view class="imgOne imgPublic" @click="lookBig(index,idx)" v-for="(img,idx) in item.image_arr" :key='idx'>
								<image :src="img" mode="widthFix"></image>
								<view class="imgZz dFlex jCenter_aCenter" v-if='item.image_arr.length > 3'>+{{item.image_arr.length - 3}}</view>
							</view>
						</view>
						<view class='time'>{{tools.timestamptoData((item.createtime).toString(),1)}}</view>
					</view>
				</view>
			</view>
			<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无数据'></u-empty>
		</view>
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
	import {
		getGoodsCommentList,
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				id:'',
				zh_score:'1',
				rate:'',
				comment:[],//评价列表
				total:0,
			};
		},
		onLoad(e){
			this.id = e.id;
			this.getShopComment();
		},
		methods:{
			// 商品评价列表
			async getShopComment(){
				let res = await getGoodsCommentList({
					id:this.id,
					zh_score:this.zh_score,
				});
				if(res){
					this.rate = res.rate;
					this.total = res.total;
					this.comment = res.comlists.length ? res.comlists.slice(0,5) : [];
				}
			},
			// 查看大图
			lookBig(index,idx){
				let line = this.comment[index];
				uni.previewImage({
					current:idx,
					urls:line.image_arr,
				})
			}
		}
	}
</script>

<style lang="scss">
	.evaluate{
		width:100%;
		.statistics{
			width:100%;
			background:white;
			padding-bottom: 12px;
			.list{
				width:100%;
				.commentOne{
					width:100%;
					padding:12px;
					box-sizing: border-box;
					border-bottom:1px solid #E6E6E6;
					.commentContent{
						margin-left:10px;
						flex:1;
						.desc{
							font-size:12px;
							margin:10px 0;
						}
						.imgs{
							width:100%;
							margin: 0 auto 10px;
							.imgOne{
								width:85px;
								max-height:85px;
								border-radius:4px;
								margin-right:12px;
								overflow: hidden;
								position:relative;
								.imgZz{
									width:100%;
									height:100%;
									background:rgba(0,0,0,0.5);
									position:absolute;
									top:0;
									left:0;
									color:white;
									font-size:14px;
								}
							}
						}
						.time{
							font-size:12px;
							color:#808080;
						}
					}
				}
			}
			.tongji{
				width:100%;
				padding:12px;
				font-size:12px;
				box-sizing:border-box;
				border-bottom:1px solid #E6E6E6;
				.favorable{
					color:#808080;
				}
			}
		}
		.tagScreen{
			width:100%;
			padding:12px 12px 0;
			box-sizing:border-box;
			background:white;
			margin-bottom:12px;
			.tagOne{
				display:inline-block;
				width:max-content;
				font-size:12px;
				padding:6px 8px;
				border-radius:50px;
				background:#DCE8F7;
				margin:0 8px 8px 0;
			}
			.actTag{
				background:#1362C9;
				color:white;
			}
		}
	}
</style>
